<template>
  <div class="navigation" :style="navBg">
    <div class="container navigation-container">
      <div class="logo">
        <a v-if="logo != null" href="/" title="首页">
          <img :src="logo" ref="logo">
        </a>
      </div>
      <nav>
        <ul>
          <li>
            <router-link to='/'>
              {{ $t('navigation.home') }}
            </router-link>
          </li>
          <li>
            <router-link to='/AboutUs'>
              {{ $t('navigation.about') }}
            </router-link>
          </li>
          <li>
            <router-link to='/Product'>
              {{ $t('navigation.product') }}
            </router-link>
          </li>
          <li>
            <router-link to='/News'>
              {{ $t('navigation.new') }}
            </router-link>
          </li>
          <li>
            <router-link to='/ContactUs'>
              {{ $t('navigation.contact') }}
            </router-link>
          </li>
          <li>
            <a class="a-btn" v-if="lang == 'zh'" @click="handleLang('en')">EN</a>
            <a class="a-btn" v-else @click="handleLang('zh')">中文</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
import * as homeApi from '@/api/web/homeApi';
import * as storage from '@/utils/localStorageUtil';

export default {
  data () {
    return {
      navBg: {
        backgroundColor: 'rgba(255, 255, 255, 0.1)',
        color: '#fff',
      },
      lang: localStorage.getItem('lang') || 'zh',
      logo: storage.getLocalStorage('logoUrl'),
    }
  },
  mounted () {
    if (this.logo == null) {
      this.getLogoUrl();
    }
    window.addEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop) {
        var i = scrollTop / (scrollTop + 10);
        this.navBg.backgroundColor = `rgba(255, 255, 255,${i})`;
        this.navBg.color = "#000";
      } else if (scrollTop === 0) {
        this.navBg.backgroundColor = 'rgba(255, 255, 255, 0.1)'
        this.navBg.color = "#fff";
      }
    },
    // 滚动之前重置
    beforeDestroy () {
      window.removeEventListener('scroll', this.handleScroll)
    },
    handleLang (lang) {
      localStorage.setItem('lang', lang);
      window.location.reload();
    },
    getLogoUrl () {
      homeApi.getLogoUrl()
        .then(res => {
          if (res.code == 200) {
            this.logo = res.data;
            storage.setLocalStorage('logoUrl', res.data, 1800000);
          }
        })
    },
  },
}
</script>

<style scoped>
.a-btn {
  cursor: pointer;
}

.navigation {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  transition: background .2s;
  border-bottom: 1px solid rgb(145 145 145 / 15%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.navigation-container {
  display: flex;
  align-items: center;
}

.logo {
  width: 150px;
  height: 60px;
}

.logo img {
  width: 100%;
  user-select: none;
}

.navigation nav {
  flex: 1;
}

.navigation:hover {
  background: #fff !important;
  color: #000 !important;
}

.navigation ul {
  font-size: 0.9rem;
  list-style: none;
  display: flex;
  padding: 0px 0px;
  margin: 0px;
}

.navigation ul li {
  display: inline-block;
  width: 16%;
  text-align: center;
  position: relative;
  user-select: none;
}

.navigation ul li:before {
  content: '';
  height: 3px;
  background-color: #806e22;
  width: 0;
  left: 50%;
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  transition: .3s;
  margin: auto;
}

.navigation ul li:hover:before {
  width: 40%;
}

.navigation ul li a {
  color: inherit;
  text-decoration: none;
  line-height: 65px;
  display: block;
  transition: .3s;
}

.navigation ul li a:hover {
  color: #806e22;
}
</style>